<script>
import * as echarts from 'echarts'
import BaseChartVue from '@/components/BaseChart.vue'
import { arrayGroupBy } from '../../../lib/utils'
import store from '@/store'
import qs from 'querystring'
export default {
  name: 'BarBaseChart',
  components: {},
  extends: BaseChartVue,
  props: {
    color: {
      type: Array,
      default: () => ['#00feff','#0ba3ff', '#00d386', '#fccb05', '#b190ff', '#b190ff'],
    },
    colorArea: {
      type: Array,
      default: () => ['#0286ff','#873aff', '#488b00', '#f5804d', '#6d50ff', '#b190ff'],
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      },
    },
    value: {
      type: String,
      default: () => '',
    }
  },
  data() {
    return {}
  },
  computed: {},
  created() { },
  mounted() {
    // let that = this
    // this.baseChart.on('click', function (params) {
    //   that.$router.push({ path: '/warnTable', query: {cityCode: params.name, providerType: that.value} });
    // });
  },
  methods: {
    makeOptions() {
      let dataList = arrayGroupBy(this.dataList, 'attr')
      const xAxisData = dataList.length ? dataList[0]?.list.map(item => item.name) : []
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        color: this.color,
        legend: {
          show: true,
          icon: 'rect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，nonei
          data: dataList.map(item => item.name),
          itemHeight: 14,
          itemWidth: 14,
          itemGap: 40,
          textStyle: {
            color: '#202a3d',
            fontSize: 16
          },
          right: 'center',
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '4%',
          top: '40',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            fontSize: 16,
            textStyle: {
              color: '#202a3d',
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          show: true,
          minInterval: 1,
          splitNumber: 5,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            fontSize: 14,
            formatter: '{value}',
            textStyle: {
              color: '#202a3d',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#d5f0fc'],
              type: 'dashed',
            },
          },
        },
        series: [...dataList.map((item, i) => {
          return {
            name: item.name,
            data: item.list.map(item => item.value),
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              barBorderRadius: [20, 20, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: this.color[i]
              },
              {
                offset: 1,
                color: this.colorArea[i]
              }
              ])
            }
          }
        })],
      }
      let that = this
      let loginCode = store.getters.loginCode
      this.baseChart.getZr().on('click', function (params) {
        let pointInPixel = [params.offsetX, params.offsetY];
        if (that.baseChart.containPixel('grid', pointInPixel)) {
          let xIndex = that.baseChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
          let opt = option.xAxis.data[xIndex]
          let query = { cityCode: opt, providerType: that.value, loginCode, type: '33' }
          window.open(`/#/tokenLogin?${qs.stringify(query)}`)
          // that.$router.push({ path: '/warnTable', query: { cityCode: opt, providerType: that.value, loginCode } });
        }

      });
      return option
    },
  },
}
</script>